<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:g='urn:import:com.google.gwt.user.client.ui'
        xmlns:pchrc='urn:import:org.dyndns.merelin.pchrc.client'>

    <!--
        GIFs needed for ie6 work arounds. Can't use <ui:image>, it makes PNGs
    -->
    <ui:data field='mailboxesgroupIe6Data' src='mailboxesgroup_ie6.gif' />
    <ui:data field='tasksgroupIe6Data' src='tasksgroup_ie6.gif' />
    <ui:data field='contactsgroupIe6Data' src='contactsgroup_ie6.gif' />

    <ui:style>
        .shortcuts {
            border-left: 1px solid #999;
            border-right: 1px solid #999;
            border-bottom: 1px solid #999;
        }

        @sprite .stackHeader {
            gwt-image: 'gradient';
            background-color: #b4b6bc;
            cursor: pointer;

            text-shadow: rgba(255, 255, 255, 1) 0 1px 1px;
            font-size: 1.2em;
            font-weight: bold;
            color: #000;
            padding: .7em .5em 0 .6em;
            border-top: 1px solid #888;
        }

        @if user.agent ie6 {
            @url mailboxesgroupIe6 mailboxesgroupIe6Data;
            @url tasksgroupIe6 tasksgroupIe6Data;
            @url contactsgroupIe6 contactsgroupIe6Data;

            .mailboxesIcon {
                background-image: mailboxesgroupIe6;
                width: 31px;
                height: 22px;
                float: left;
            }

            .tasksIcon {
                background-image: tasksgroupIe6;
                width: 31px;
                height: 22px;
                float: left;
            }

            .contactsIcon {
                background-image: contactsgroupIe6;
                width: 31px;
                height: 22px;
                float: left;
            }
        } @else {
            @sprite .mailboxesIcon {
                gwt-image: 'mailboxesgroup';
                float: left;
            }

            @sprite .tasksIcon {
                gwt-image: 'tasksgroup';
                float: left;
            }

            @sprite .contactsIcon {
                gwt-image: 'contactsgroup';
                float: left;
            }
        }
    </ui:style>

    <ui:image field='mailboxesgroup' src='mailboxesgroup.png'/>
    <ui:image field='contactsgroup' src='contactsgroup.png'/>
    <ui:image field='tasksgroup' src='tasksgroup.png'/>
    <ui:image field='gradient' src='gradient_bg_dark.png' repeatStyle='Horizontal'/>

    <g:StackLayoutPanel styleName='{style.shortcuts}' unit='EM'>
        <g:stack>
            <g:header size='3'><div class='{style.stackHeader}'><div class='{style.mailboxesIcon}'/> Mailboxes</div></g:header>
            <pchrc:Mailboxes ui:field='mailboxes'/>
        </g:stack>

        <g:stack>
            <g:header size='3'><div class='{style.stackHeader}'><div class='{style.tasksIcon}'/> Tasks</div></g:header>
            <pchrc:Tasks ui:field='tasks'/>
        </g:stack>

        <g:stack>
            <g:header size='3'><div class='{style.stackHeader}'><div class='{style.contactsIcon}'/> Contacts</div></g:header>
            <pchrc:Contacts ui:field='contacts'/>
        </g:stack>
    </g:StackLayoutPanel>
</ui:UiBinder>
